<template>
    <div style="background-color: aqua;">
        <h1>儿子</h1>
        <SonBoy @boy="BoyHandle"/>
        <h1>女儿</h1>
        <SonGirl @girl="GirlHandle"/>
        <p>Boy:{{ grade1 }}</p>
        <p>Girl:{{ grade2 }}</p>
        <p>{{ store.money }}元</p>
        <p>发钱 
            <button @click.once="send(100)">奖励</button>
        </p>
    </div>
</template>
<script>
import SonBoy from '@/components/SonBoy.vue';
import SonGirl from '@/components/SonGirl.vue';
import { useMyStore } from '../store/mystore.js'

export default {
    components:{
        SonBoy,
        SonGirl
    },
    methods: {
        BoyHandle(val){
            this.grade1=val
        },
        GirlHandle(val){
            this.grade2=val
        },
        send(val){
            if(this.grade1>this.grade2&&this.grade1>=60){
                this.store.decrement(val)
                this.money1+=val
            }else if(this.grade1<this.grade2&&this.grade2>=60){
                this.store.decrement(val)
                this.money2+=val
            }else if(this.grade1==this.grade2){
                this.store.decrement(val)
                this.money1+=val/2
                this.money2+=val/2
            }else{
                alert("No")
            }
        }
    },
    data() {
        return {
            grade1:'',
            grade2:'',
            store:useMyStore(),
            money1:2000,
            money2:3000
        }
    },
}
</script>